﻿
<!DOCTYPE html>
<html>
<head>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>

<link rel="stylesheet" href="css/demo.css" media="screen" type="text/css" />
</head>
<body>
<h1>Socket.IO  DEMO</h1>
<div id="chatList">
	<h1>群列表</h1>
	<ul class="groupList">
		
	</ul>
	<h1>聊天室列表</h1>
	<ul class="chatList">
		<li><a href="javascript:;" class="joinroom" id="room1">聊天室一</a></li>
		<li><a href="javascript:;" class="joinroom" id="room2">聊天室二</a></li>
		<li><a href="javascript:;" class="joinroom" id="room3">聊天室三</a></li>
	<ul>
</div>
<div id="chatCon">
	<input type="hidden" name="chatId">
	<div id="divLeft" class="fn-hide">
		<div id="divchat">
			<div class="roomChat">聊天室一</div>
		</div>
		<div id="divContainer3">
			<table id="tdDlg" border="0" cellpadding="3" cellspacing="0" width="100%">
				<tr id="trDlg">
					<td valign="top" id="tdDlg" nowrap>对话</td>
					<td valign="top" id="tdDLg">
						<textarea id="tbMsg" cols="255" rows="5" style="width:100%"></textarea>
					</td>
					<td valign="top" id="tdDlg">
						<input type="hidden" name="userID" value="">
						<input id="btnSend" type="button" value="发送"  >
					</td>
				</tr>
			</table>
		</div>
	</div>

	<div id="divRight" class="fn-hide">
		用户列表：
	</div>
</div>


<script>
	var socket=io.connect();
	
	var cookiedata=document.cookie.split(";"); 

	var username=cookiedata[0].split("=")[1];
	var password=cookiedata[1].split("=")[1];

	socket.once("getGroup",function(rooms){
		var groupList="";
		for(var i=0; i<rooms.length;i++) {
			groupList+='<li><a href="javascript:;" class="joinroom" id="'+rooms[i]+'">'+rooms[i]+'</a></li>';
		}
		$("#chatList .groupList").html(groupList);
	})
	
	
	socket.on('disconnect',function(){ console.log("服务器断开链接。");});
</script>
</body>
</html>